<template>
    <div class="box">
       <heard :title="title"></heard>
        <van-row style="flex: 1;overflow: hidden;">
            <van-col span="6" style="height: 100%;overflow: auto;">
                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="item in categories" :title="item.cat_name" />
                </van-sidebar>
            </van-col>

                <van-col span="16" offset="1" style="height: 100%;overflow: auto;" class="box2" @scroll="scrollfun">
                      <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <div v-for="item in categories[active]?.children">
                        <van-skeleton title :row="20" v-if="gjp" />
                        <h4>{{ item.cat_name }}</h4>
                        <router-link :to="{ name: 'list', params: { query: item.cat_name } }">
                            <van-grid :column-num="4">
                                <van-grid-item v-for="item in item.children" :icon="item.cat_icon"
                                    :text="item.cat_name" />
                            </van-grid>

                        </router-link>

                    </div>
                      </van-pull-refresh>
                </van-col>

          


        </van-row>



    </div>
</template>

<script setup>
import heard from '@/components/heard.vue';
const title='分类'
import { ref } from 'vue';
import { categoriesApi } from '@/api/api';
import { showToast } from 'vant';
let categories = ref([])
categoriesApi().then(res => {
    console.log('分类', res)
    categories.value = res.data.message

})

let active = ref(0)
let gjp = ref(true)
setInterval(() => {
    gjp.value = false
}, 1000)
const loading = ref(false);
const onRefresh = () => {
    categoriesApi()
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
    }, 1000);
};





</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    overflow-y: auto;


    display: flex;
    flex-direction: column;
}
</style>